<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="liaosimin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>旅行账本</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "arial black", sans-serif;
            color: #333;
            font-size: 21px;
            background: #e7e8ec;
            margin: 0;
        }

        a {
            text-decoration: none;
            outline: 0;
        }

        #notes {
            margin-top: 1em;
        }

        .title_box {
            background-color: #1cb7f0;
            color: white;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 90;
            padding: 10px 0;
        }

        .name {
            margin-left: 4em;
        }

        .member {
            margin: 2.5em 10px;
            padding: 10px;
            background-color: ivory;
            display: none;
        }

        input, select {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 2px;
            background: #f2f2f2;
            font-size: 1em;
            padding: 0.3em 0;
            text-indent: 5px;
            margin: 2px 0;
        }

        .btn-box {
            margin: 10px 0;
        }

        .btn {
            display: inline-block;
            width: 49%;
            color: #fff !important;
            text-align: center;
            border-radius: 1px;
            padding: 0.3em 0;
            font-size: 1em;
        }

        .concel-btn {
            background: #999;
        }

        .sure-btn {
            background: #00D289;
        }

        .add-btn {
            background: orange;
        }

        .count-btn {
            background: #1cb7f0;
        }

        .member_list span {
            margin: 3px;
            line-height: 2;
            padding: 3px;
            font-size: 0.8em;
            background-color: orangered;
            color: white;
            display: inline-block;
        }

        .member_list {
            margin: 10px 0 0 0;
            background: white;
        }

        .cost{
            background-color: ivory;
            margin: 2.5em 10px 0;
            padding: 10px;

        }
        .note {
            background-color: ivory;
            margin: 5px 10px;
            padding: 10px;

        }

        #cost_sum {
            font-size: 2em;
            color: red;
        }

        .date {
            background: #00D289;
            color: white;
        }

        .member-name {
            font-size: 0.8em;
        }

        .member-money {
            float: right;
            color: red;
        }

        .time {
            font-size: 0.7em;
            color: gray;
        }

        .remark {
            float: right;
            font-size: 0.7em;
            color: gray;
            margin-top: 4px;
        }

        .note-detail {
            position: relative;
            padding: 0.1em 0.5em;
            border-bottom: 1px solid #ddd;
        }

        .note-detail span {
            position: relative;
        }

        .img-member {
            width: 1.2em;
            float: right;
            margin-right: 1em;
        }
        .img-menu{
            width: 1.2em;
            float: left;
            margin-left: 1em;
        }
        .add-book{
            display: none;
            width: 67%;
            z-index: 99;
            position: fixed;
            background-color: white;
            top: 20%;
            left: 13%
        }
        .book-list a{
            text-align: center;
            padding: 0.2em;
            display: block;
            border-bottom: 1px solid #ddd;
        }
        #book-sure{
            margin-left: 25%;
        }
        #cover{
            display: block;
            position: fixed;
            z-index: 98;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background: #000 none repeat scroll 0% 0%;
        }
        .add-cost{display: none}
        .calculate{
            position: fixed;
            top: 6em;
            margin-left: 2em;
            background-color: ivory;
            width: 70%;
            border-bottom: 1px solid #ddd;
            display: none;
            z-index: 99;
        }
        .mem_sum{padding: 0.5em;}
    </style>
</head>
<body>
<header class="title_box">
    <img src="http://7xitqn.com1.z0.glb.clouddn.com/menu.png" class="img-menu">
    <span class="name">廖斯敏</span>
    <img src="http://7xitqn.com1.z0.glb.clouddn.com/555475.png" class="img-member">
</header>
<div class="add-book">
    <div class="book-list">
    </div>
    <input id="book-name" placeholder="请输入账本名字">
    <div class="btn-box">
        <a href="javascript:;" class="btn sure-btn" id="book-sure">确定</a>
    </div>
</div>
<div id="cover"></div>
<div class="member">
    <div>
        <input id="member" placeholder="请输入新成员名字">
        <div class="btn-box">
            <a href="javascript:;" class="btn concel-btn" id="mem-cancel">取消</a>
            <a href="javascript:;" class="btn sure-btn" id="mem-sure">确定</a>
        </div>
    </div>
    <div class="member_list">
    </div>
</div>
<div class="cost">
    <div>
        <label>总计消费：</label>
        <span id="cost_sum">0</span>元
    </div>
    <div>
        <label>账本成员：</label>
        <span id="mem_sum">0</span>人
    </div>
    <div class="btn-box">
        <a href="javascript:;" class="btn add-btn">记一笔</a>
        <a href="javascript:;" class="btn count-btn">结算</a>
    </div>
    <div class="add-cost">
        <select id="select">
        </select>
        <input id="money" placeholder="花费（元">
        <input id="remark" placeholder="备注">

        <div class="btn-box">
            <a href="javascript:;" class="btn concel-btn" id="cost-cancel">取消</a>
            <a href="javascript:;" class="btn sure-btn" id="cost-sure">确定</a>
        </div>
    </div>
</div>

<div id="notes">
{#    <div class="note">#}
{#        <div class="date">2102-10-1 星期三</div>#}
{#        <div class="note-detail">#}
{#            <div><span class="member-name">廖斯敏</span><span class="member-money">120</span></div>#}
{#            <div><span class="time">21:00:00</span><span class="remark">吃饭</span></div>#}
{#        </div>#}
{#    </div>#}

</div>

<div>

</div>
<div class="calculate">
    <div class="date">消费统计：</div>
    <div class="mem_sum"></div>
</div>

<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script>
    var select;
    Zepto(function ($) {
        for(x in localStorage)
        {
            $('.book-list').append('<a href="/account?id='+x+'">'+localStorage[x]+'</a>');
        }
        if(!getUrlParam("id")){
            $('.add-book').show();
            select = $('.add-book');
            $('#cover').show();
        }

        $('.img-member').on('click', function () {
            $('.member').toggle();
        });
        $('.img-menu').on('click', function () {
            $('.add-book').show();
            select = $('.add-book');
            $('#cover').show();
        });

        $('#mem-cancel').on('click', function () {
            $('.member').hide();
        });
        $('.add-btn').on('click', function () {
            $('.add-cost').toggle();
        });
        $('#cost-cancel').on('click', function () {
            $('.add-cost').hide();
        });
        $('#cover').on('click', function () {
            select.hide();
             $('#cover').hide();
        });

        $('#mem-sure').on('click', function () {
            var name = $('#member').val();
            $.post('', {action: "add_mem", name:name}, function (res) {
                if(res.success){
                    add_member(name);
                    $('.member').hide();
                }
                else{
                    alert("添加失败，查看是否有重名");
                }
            });

        });

        $('#cost-sure').on('click', function () {
            var name = $('#select').val();
            var money = $('#money').val();
            var remark = $('#remark').val();
            var time = new Date();
            var timestamp = time.valueOf();
            if(!name||!money||!remark){alert("不能为空");return;}
            $.post('', {action: "add_cost",name:name, money:money, remark:remark, time:timestamp}, function (res) {
                if(res.success){
                    add_note(time,name,money,remark);
                    $('.add-cost').hide();
                }
            });
        });

        $('#book-sure').on('click', function () {
            var name = $('#book-name').val();
            if(!name){alert("名字不能为空");return;}
            $.post('', {action: "add_book",name:name}, function (res) {
                if(res.success){
                    localStorage[res.id] = name;
                    window.location = "/account?id="+res.id;
                }
            });
        });
        $('.count-btn').on('click', function () {
            $.post('', {action: "get_data"}, function (res) {
                if(res.success){
                    var mem_sum = new Object();
                    var sum=0
                    for(x in res.members){
                        mem_sum[res.members[x]] = 0;
                    }
                    for(x in res.notes){
                        sum += Number(res.notes[x]["money"]);
                        mem_sum[res.notes[x]["name"]] += Number(res.notes[x]["money"]);
                    }
                    if($('.mem_sum').children().length>0)
                    {
                        $('.mem_sum').children().remove();
                    }
                    for(x in mem_sum){
                        add_calculate(x,mem_sum[x]);
                    }
                    $('#cover').show();
                    $('.calculate').show();
                    select = $('.calculate');
                }
            });
        });




        $.post('', {action: "get_data"}, function (res) {
            if(res.success){
                $('.name').text(res.name);
                for(x in res.members){
                    add_member(res.members[x]);
                }
                for(x in res.notes){
                    var date = new Date(Number(res.notes[x]["time"]));
                    var name = res.notes[x]["name"];
                    var money = res.notes[x]["money"];
                    var remark = res.notes[x]["remark"];
                    add_note(date, name, money, remark);
                }
            }
        });
    });


    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function add_member(name){
        $('#select').append("<option value="+ name+">"+ name +"</option>");
        $('.member_list').append('<span>'+name+'</span>');
        $('#mem_sum').text(Number($('#mem_sum').text())+1);
    }

    function add_note(time, name, money, remark){
        var sele = time.getFullYear()+'_'+time.getMonth()+'_'+time.getDate();
        if($('#'+sele).length>0)
        {
            $('#'+sele).append('<div class="note-detail"><div><span class="member-name">'+ name +
                    '</span><span class="member-money">&#165;'+ money +
                    '</span></div><div><span class="time">'+time.toLocaleTimeString()+
                    '</span><span class="remark">'+remark+'</span></div></div>')
        }
        else{
            var week;
            if(time.getDay()==0) week="星期日";
            if(time.getDay()==1) week="星期一";
            if(time.getDay()==2) week="星期二";
            if(time.getDay()==3) week="星期三";
            if(time.getDay()==4) week="星期四";
            if(time.getDay()==5) week="星期五";
            if(time.getDay()==6) week="星期六";
            var t = time.toLocaleDateString() +' '+ week;
            $('#notes').prepend('<div class="note" id="'+sele+
                    '"><div class="date">'+t+
                    '</div><div class="note-detail"><div><span class="member-name">'+name+
                    '</span><span class="member-money">&#165;'+ money+
                    '</span></div><div><span class="time">'+ time.toLocaleTimeString()+
                    '</span><span class="remark">'+remark+
                    '</span></div></div></div>')
        }

        $('#cost_sum').text(Number($('#cost_sum').text())+Number(money));
    }

    function add_calculate(name, money_sum){
        $('.mem_sum').prepend('<div><span>'+name+
                '</span><strong class="member-money">&#165;'+ money_sum+
                '</strong></div>')
    }
</script>
</body>
</html>